/**
 * Created by PhpStorm.
 * User:  iyahe@qq.com (天明)
 * Date: 2019/8/1 0001
 * Time: 下午 14:19
 * Description:
 */
import React from 'react';
import {Input,Button,Tag,Checkbox,Select, Message,Slider} from 'element-react';
import cache from "../../plugin/cache";
const StyleSheet = {
	yaliPage: {
		index: {
			background:'#fff',
			padding:'15px',
			borderRadis:'10px'
		},
		h10: {
			height: '10px'
		}
	}
}
export default class homeYali extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			options: [{
				value: '选项1',
				label: '黄金糕'
			}, {
				value: '选项2',
				label: '双皮奶'
			}, {
				value: '选项3',
				label: '蚵仔煎'
			}, {
				value: '选项4',
				label: '龙须面'
			}, {
				value: '选项5',
				label: '北京烤鸭'
			}],
			value: '',
			check: false,
			select: false,
			form: {
				url: 'http://armylong.com/api/access/login/?user=armylong&pwd=888'
			},
			open: false,
			success:0,
			error: 0,
			load: ``,
			number: 0,
			speed: 10
		};
	}
	render() {
		return (
			<div className="index" style={StyleSheet.yaliPage.index}>
				<Input value={this.state.form.url}
							 onChange={this.formChange.bind(this)}
							 placeholder="请输入需要压测的网址"
							 icon="edit"
							 autoFocus={true} />
				<div className="h10" style={StyleSheet.yaliPage.h10}></div>
				<div className="block">
					<span className="demonstration">请求间隔:</span>
					<Slider value={this.state.speed} step="1" showStops={true} min={2} max={500}
									onChange={this.onChangeSpeed.bind(this)} />
				</div>
				<div className="h10" style={StyleSheet.yaliPage.h10}></div>
				<Button type="success" onClick={this.goChose.bind(this)}>选择代理</Button>
				<Button type="primary" onClick={this.startRun.bind(this)}>
					{this.state.open ? '停止测试' : '开始测试'}
				</Button>
				<div className="total" style={{
					margin: '10px auto',
					fontSize: '13px'
				}}>
					共请求 {this.state.number} 次,
					成功: {this.state.success} 次,
					失败: {this.state.error} 次,
					等待中: {this.state.number - (this.state.success+this.state.error)}
				</div>
				<div className="boxScroll" style={{
					background: 'rgba(0,0,0,0.1)',
					height: '410px',
					margin: '10px auto',
					padding:'10px',
					maxHeight: '390px',
					overflow:'auto',
					fontSize:'12px',
				}} dangerouslySetInnerHTML={{__html: this.state.load}}>
				</div>
			</div>
		)
	}
	handleCheckChange () {
		this.setState({
			check: !this.state.check,
			options: this.state.options
		});
	}
	onSubmit(e) {
		e.preventDefault();
	}
	goChose () {
		const {history} = this.props;
		history.replace("/daili?model=1");
	}
	onChange(key, value) {
		this.state.form[key] = value;
		this.forceUpdate();
	}
	runLog (text){
		this.setState({
			load: this.state.load + text + '<br/>'
		})
	}
	startRun () {
		let URL = this.state.form.url;
		var timer;
		if (URL.indexOf('http') >= 0) {
			let number = 0;
			if(!this.getOnceProxy()) {
				Message({
					message: '选择代理IP后继续...',
					type: 'error'
				});
				return false
			}
			if(!this.state.open) {
				this.setState({
					open: true
				});
				timer = setInterval(()=> {
					number++;
					let proxy = this.getOnceProxy();
					this.setState({
						number: number
					});
					if(!this.state.open) {
						clearInterval(timer)
					}
					const remote = window.electron.remote;
					remote.app.proxyTest(URL,'http://' + proxy).then((code, body, head) => {
						this.setState({
							success: this.state.success+1
						})
						console.log(this.state.success)
						this.runLog(`<span class="success">${number}: ${URL}, 使用代理:${proxy}, 访问成功...状态码: ${code}</span>`);
					}).catch(e => {
						this.setState({
							error: this.state.error+1
						})
						this.runLog( `<span class="error">${number}: ${URL}, 使用代理:${proxy} 访问失败...</span>`);
					});
					try{
						let ele = document.querySelector('.boxScroll');
						ele.scrollTop = ele.scrollHeight;
					}catch (e) {}
				}, this.state.speed)
			} else {
				this.setState({
					open: false
				});
			}
		} else {
			Message({
				message: 'URL地址有误',
				type: 'error'
			});
		}
	}
	formChange(e){
		this.setState({
			form: {
				url:e
			}
		})
	}
	getRand (m,n){
		return Math.floor(Math.random()*(m - n) + n);
	}
	getOnceProxy(){
		let key = 'favList';
		let favList = cache.default.get(key);
		if (favList) {
			return favList[this.getRand(0, favList.length)]
		}
		return false;
	}
	onChangeSpeed (val) {
		this.setState({
			speed: val
		})
	}
	componentDidMount() {
		let search = this.props.location.search;
		if (search.indexOf('model') >= 0) {
			this.setState({
				select: !this.state.select,
				check: true
			});
			console.log(this.state)
		}
	}
}
